<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_04_阻止冒泡</title>
</head>
<body>
    <div id="app"  v-on:click="method1()">
        <div>{{num}}</div>
        <!-- 当按钮1点击事件时，会冒泡到父元素上来(因为点击的是按钮，并没有点击div，由于div是button的父元素，所以或冒泡到该父元素上)
             阻止冒泡可以将传递的事件对象调用方法stopPropagation
        -->
        <!-- 这是js原生的阻止冒泡 -->
       <button v-on:click="method2">按钮1</button>
       <!-- vue的阻止冒泡（添加事件修饰符） -->
       <button v-on:click.stop="method3">按钮2</button>
    </div>
    <div>
        <!-- 当点击a标签时，有个默认行为会跳转url，当事件方法中添加方法名preventDefault会阻止默认行为 -->
         <!-- 这是js原生的阻止默认行为 -->
        <a href="http://www.baidu.com" v-on:click='method4()'>百度</a>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                num:0
            },
            methods:{
                // 当按钮1点击事件时，会冒泡到父元素上来(因为点击的是按钮，并没有点击div，由于div是button的父元素，所以或冒泡到该父元素上)
                method1:function(){
                    this.num++;
                },
                method2:function(e){
                    //阻止冒泡
                    e.stopPropagation();
                },
                method3:function(e){
                    
                },
                method4:function(){
                    // 当点击a标签时，有个默认行为会跳转url，当事件方法中添加方法名preventDefault会阻止默认行为 
                    //阻止默认行为
                    // e.preventDefault();
                }
            }
        });
    </script>
</body>

</html></SCRIPT>